<template>
    <div class="home-panel">
        <HomePanl style="position: relative;" title="新鲜好物" subtitle="新鲜出炉 品质靠谱">
            <template #main>
                <RouterLink to="/" class="x-m"><span>查看全部 ></span><i class="iconfont icon-angle-right"></i></RouterLink>
                <ul class="goodsList">
                    <li v-for="item in list" :key="item.id">
                        <RouterLink :to="`/myc/detail/?id=`+item.id">
                            <img :src="item.picture" alt="">
                            <p class="name ellipsis">{{ item.name }}</p>
                            <p class="pic"><span>￥</span>{{ item.price }}</p>
                        </RouterLink>
                    </li>
                </ul>
            </template>
        </HomePanl>
    </div>
</template>

<script>
import { getNew } from '@/request/api/myc/myc.js'
import HomePanl from '../Homes/Panl.vue'
export default {
    components:{
        HomePanl
    },
        data(){
            return{
                list:[]
            }
        },
        mounted() {
            this.Category();
            

        },
        methods: {
            async Category() {
                const res = await getNew();
                console.log("新鲜好物", res.data.result);
                this.list = res.data.result
            }
        }
    }
</script>

<style lang="scss" scoped>
img {
    width: 30px;
    height: 30px;
}

.home-panel {
    position: relative;

    // a{
    //     position: relative;
    //     top: 0;
    //     right: 0;
    //     display: none;
    // }
    .goodsList {
        position: relative;
        height: 426px;
        display: flex;
        justify-content: space-between;

        li {
            width: 306px;
            height: 406px;
            background: #f0f9f4;
            transition: all .5s;
            text-align: -webkit-match-parent;

            a {
                color: #333;
                outline: none;

                img {
                    width: 306px;
                    height: 306px;
                }

                .ellipsis,
                .ellipsis-2 {
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                .ellipsis {
                    white-space: nowrap;
                }

                p {
                    font-size: 22px;
                    padding: 12px 30px 0 30px;
                    text-align: center;
                }

                .pic {
                    color: #cf4444;
                }
            }
        }

        li:hover {
            transform: translate3d(0, -3px, 0);
            box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
        }
    }
}
.x-m{
    position: absolute;
    right: 2px;
    top: 55px;
    span{
        font-size: 16px;
        vertical-align: middle;
        margin-right: 4px;
        color: #999;
    }
    &:hover span{
        color: #27ba9b;
    }
}
</style>